<template>
    <div class="table_">
        <div class="table-wrapper">
            <!-- 固定表头 -->
            <div class="table-header">
                <!-- 固定表头高度 -->
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    align="center"
                    height="44"
                    :header-row-style="{ background: 'rgb(29, 35, 49)', color: '#409eff' }"
                    :show-header="true"
                >
                    <el-table-column prop="workorder_no" label="工单号" />
                    <el-table-column prop="material_name" label="产品名称" />
                    <el-table-column prop="material_spec" label="规格数量" />
                    <el-table-column prop="plan_quantity" label="排产数量" width="120" />
                    <el-table-column prop="completed_quantity" label="已完成数量" width="120" />
                    <el-table-column prop="end_date" label="计划结束" />
                </el-table>
            </div>

            <!-- 可滚动内容区域 -->
            <!-- 监听动画结束，处理循环滚动 -->
            <div
                class="scroll-wrapper"
                :style="{
                    transform: `translateY(-${scrollPosition}px)`, // 通过transform模拟垂直滚动
                    transition: isSmooth ? 'transform 1.8s linear' : 'none', // 控制是否有平滑过渡动画
                }"
                @transitionend="onTransitionEnd"
            >
                <!-- 数据是原始数据的两倍，用于无缝滚动 -->
                <!-- 隐藏滚动表格的表头 -->
                <!-- 引用用于获取 DOM -->
                <el-table
                    :data="extendedData"
                    style="width: 100%"
                    :show-header="false"
                    :row-class-name="tableRowClassName"
                    align="center"
                    ref="tableRef"
                    height="auto"
                >
                    <el-table-column prop="workorder_no" />
                    <el-table-column prop="material_name" />
                    <el-table-column prop="material_spec" />
                    <el-table-column prop="plan_quantity" width="120" />
                    <el-table-column prop="completed_quantity" width="120" />
                    <el-table-column prop="end_date" />
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, onBeforeUnmount } from "vue";

// 定义表格数据的类型
interface TableRow {
    workorder_no: string;
    material_name: string;
    material_spec: string;
    plan_quantity: number;
    completed_quantity: number;
    end_date: string;
}

// 组件内部状态
const tableRef = ref<any>(null); // 滚动内容表格的引用
const tableData = ref<TableRow[]>([]); // 原始表格数据
const extendedData = ref<TableRow[]>([]); // 扩展数据（原始数据复制一份，实现无缝滚动）

const scrollPosition = ref(0); // 当前滚动位移（单位：像素）
const isSmooth = ref(true); // 是否启用平滑过渡动画
const rowHeight = ref(44); // 单行高度，初始假设44px，后续动态获取
const visibleRows = 4; // 可视区域显示行数
let timer: number | null = null; // 定时器id，用于滚动控制
let currentIndex = 0; // 当前滚动到第几行，用于循环重置

// 表格行样式，根据行索引返回不同类名实现斑马条纹
function tableRowClassName({ rowIndex }: { rowIndex: number }) {
    if (rowIndex % 4 === 1) return "warning-row";
    else if (rowIndex % 4 === 3) return "success-row";
    else return "odd-row";
}

// 获取表格行高，确保滚动距离准确
function getRowHeights() {
    nextTick(() => {
        if (!tableRef.value) return;
        // 查询所有表格行
        const rows = tableRef.value.$el.querySelectorAll(".el-table__row");
        if (rows.length > 0) {
            rowHeight.value = rows[0].offsetHeight; // 取第一行高度作为标准行高
        }
    });
}

// 初始化扩展数据，把原始数据复制一遍追加到后面
function initializeData() {
    extendedData.value = [...tableData.value, ...tableData.value];
}

// 启动滚动定时器，每2秒滚动一行
function startScroll() {
    timer = window.setInterval(() => {
        scrollPosition.value += rowHeight.value; // 计算滚动位移，向上滚动一行高度
        isSmooth.value = true; // 开启平滑动画
        currentIndex++;

        // 如果滚动到原始数据末尾，稍作停顿后跳回顶部
        if (currentIndex >= tableData.value.length) {
            setTimeout(() => {
                isSmooth.value = false; // 关闭动画，防止跳跃时动画效果
                scrollPosition.value = 0; // 立即回到顶部位置
                currentIndex = 0;
            }, 1900); // 与动画时长对应，保证视觉连续
        }
    }, 2000); // 2秒一跳
}

// 停止滚动，清理定时器
function stopScroll() {
    if (timer !== null) {
        clearInterval(timer);
        timer = null;
    }
}

// 动画结束事件处理，用于循环滚动的状态重置
function onTransitionEnd() {
    if (!isSmooth.value && scrollPosition.value === 0) {
        isSmooth.value = true; // 动画重置，准备下一次滚动
    }
}

// 组件挂载时初始化数据，获取行高，启动滚动
onMounted(() => {
    // 模拟填充初始表格数据
    tableData.value = [
        {
            workorder_no: "001",
            material_name: "产品1",
            material_spec: "规格A",
            plan_quantity: 100,
            completed_quantity: 50,
            end_date: "2025-08-20",
        },
        {
            workorder_no: "001",
            material_name: "产品1",
            material_spec: "规格A",
            plan_quantity: 100,
            completed_quantity: 50,
            end_date: "2025-08-20",
        },
        {
            workorder_no: "001",
            material_name: "产品1",
            material_spec: "规格A",
            plan_quantity: 100,
            completed_quantity: 50,
            end_date: "2025-08-20",
        },
        {
            workorder_no: "001",
            material_name: "产品1",
            material_spec: "规格A",
            plan_quantity: 100,
            completed_quantity: 50,
            end_date: "2025-08-20",
        },

        {
            workorder_no: "002",
            material_name: "产品2",
            material_spec: "规格B",
            plan_quantity: 200,
            completed_quantity: 150,
            end_date: "2025-08-21",
        },
        {
            workorder_no: "003",
            material_name: "产品3",
            material_spec: "规格C",
            plan_quantity: 150,
            completed_quantity: 150,
            end_date: "2025-08-22",
        },
        {
            workorder_no: "004",
            material_name: "产品4",
            material_spec: "规格D",
            plan_quantity: 120,
            completed_quantity: 80,
            end_date: "2025-08-23",
        },
        {
            workorder_no: "005",
            material_name: "产品5",
            material_spec: "规格E",
            plan_quantity: 130,
            completed_quantity: 70,
            end_date: "2025-08-24",
        },
    ];

    initializeData(); // 复制数据实现无缝滚动
    nextTick(() => {
        getRowHeights(); // 获取行高
        startScroll(); // 启动滚动
    });
});

// 组件卸载时清理定时器
onBeforeUnmount(() => {
    stopScroll();
});
</script>

<style scoped>
.table_ {
    width: 100%;
    height: 582px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden; /* 防止滚动内容超出区域显示 */
}

.table-wrapper {
    position: relative;
}

.table-header {
    position: relative;
    top: 0px;
    height: 44px;
    z-index: 1;
    background: rgb(29, 35, 49);
}

/* 通过 /deep/ 或 :deep 作用于子组件 */
.table_ :deep(.scroll-wrapper) {
    overflow: hidden !important; /* 隐藏滚动部分的溢出 */
    will-change: transform; /* 提升性能 */
}

.table-header :deep(.el-table__header) tr {
    height: 44px !important; /* 固定表头行高 */
}
.table-header :deep(.el-table__cell) {
    background-color: rgb(29, 35, 49);
}

.table_ :deep(.el-table) td > .cell {
    padding-left: 10px;
}

.table_ :deep(.el-table) {
    height: 582px;
    background: rgb(29, 35, 49);
    color: #dddddd;
}

.table_ :deep(.warning-row) {
    background: rgb(52, 57, 70);
}

.table_ :deep(.success-row) {
    background: rgb(52, 57, 70);
}

.table_ :deep(.odd-row) {
    background: rgb(29, 35, 49);
}

.table_ :deep(.el-table__cell) {
    text-align: center;
}
</style>
